import React from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Button, Row, Col, Table, Spin } from 'antd';
import { connect } from 'dva';
import router from 'umi/router';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';

const FormItem = Form.Item;

@connect(({ inservicematerial, material, loading }) => ({
  inservicematerial,
  material,
  loading: loading.models.material,
}))
class DetailMaterial extends React.Component {
  state = {};

  columns = [
    {
      title: '材料名称',
      dataIndex: 'matName',
      onHeaderCell: () => ({
        style: {
          fontWeight: 'bold',
        },
      }),
      onCell: () => ({
        style: {
          width: '14%',
        },
      }),
    },
    {
      title: '输入类型',
      dataIndex: 'inpTypeName',
      onHeaderCell: () => ({
        style: {
          fontWeight: 'bold',
        },
      }),
      onCell: () => ({
        style: {
          width: '14%',
        },
      }),
    },
    {
      title: '是否支持判断',
      dataIndex: 'judgeFlagName',
      onCell: () => ({
        style: {
          width: '14%',
        },
      }),
      onHeaderCell: () => ({
        style: {
          fontWeight: 'bold',
        },
      }),
    },
    {
      title: '显示逻辑',
      dataIndex: 'judgeLogicName',
      onCell: () => ({
        style: {
          width: '14%',
        },
      }),
      onHeaderCell: () => ({
        style: {
          fontWeight: 'bold',
        },
      }),
      render: text => <span>{text || '--'}</span>,
    },
    {
      title: '是否必填',
      dataIndex: 'reqFlag',
      onCell: () => ({
        style: {
          width: '14%',
        },
      }),
      onHeaderCell: () => ({
        style: {
          fontWeight: 'bold',
        },
      }),
      render: (text, record) => {
        if (Number(record.reqFlag) === 1) {
          return <span>是</span>;
        }
        return <span>否</span>;
      },
    },
    {
      title: '默认值',
      dataIndex: 'dftVal',
      onHeaderCell: () => ({
        style: {
          fontWeight: 'bold',
        },
      }),
      onCell: () => ({
        style: {
          width: '14%',
        },
      }),
      render: (text, record) => {
        let newTex = text;
        if (record.nmDictItem) {
          const arr = record.nmDictItem.filter(item => item.itemCode === text);
          newTex = arr.length ? arr[0].itemName : text;
        }
        return <span>{newTex || '--'}</span>;
      },
    },
    {
      title: '所属产品',
      dataIndex: 'pdName',
      onCell: () => ({
        style: {
          width: '14%',
        },
      }),
      render: text => <span>{text || '--'}</span>,
    },
  ];

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'material/fetchDict',
      payload: ['SER_TYPE', 'YES_NO_FLAG', 'INPUT_TYPE'],
    });
  }

  componentWillUnmount = () => {
    const { dispatch } = this.props;
    const parms = {
      titleArr: [true],
      headertitle: ['标题'],
      tValue: [[]],
      newNo: 0,
      tableArr: [{ pageIdEdit: 0, maGpDetails: [] }],
      requestData: [],
      addMetial: [],
      tableJudge: [],
      logicList: [],
      tValues: '1',
      index: 0,
      bigResult: [],
      matPkgId: null,
      areaId: undefined,
      serType: undefined,
      remark: undefined,
    };
    dispatch({
      type: 'material/updateModelData',
      payload: parms,
    });
  };

  submitcancel = () => {
    router.goBack();
  };

  render() {
    const { material, loading } = this.props;
    const { tableArr, areaName, contTypeName, remark, coltFlag, coltFlagName } = material;
    const formItemLayout = {
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 8,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 16,
        },
      },
    };
    return (
      <PageHeaderWrapper>
        <Spin tip="Loading..." spinning={loading}>
          <Card title="查看入职材料" bordered={false}>
            <Form>
              <Row>
                <Col span={8}>
                  <FormItem {...formItemLayout} label={<span>地区 </span>}>
                    <span>{areaName}</span>
                  </FormItem>
                </Col>
                <Col span={8}>
                  <FormItem {...formItemLayout} label="合同类型:">
                    <span>{contTypeName}</span>
                  </FormItem>
                </Col>
                <Col span={8}>
                  <FormItem {...formItemLayout} label={<span>是否收取材料</span>}>
                    {coltFlagName ? <span>{coltFlagName}</span> : <span>--</span>}
                  </FormItem>
                </Col>
                <Col span={8}>
                  <FormItem {...formItemLayout} label={<span>备注</span>}>
                    <span>{remark}</span>
                  </FormItem>
                </Col>
              </Row>
              {String(coltFlag) === '2' ? (
                <span style={{ marginLeft: 14, color: '#f00' }}>
                  注：请确保实际业务办理中，无须向员工进行收取任何的纸质或电子文件，以及无须额外获取任何的人员的相关信息
                </span>
              ) : null}
            </Form>
          </Card>
          {String(coltFlag) === '1' && !!tableArr.length && (
            <Card>
              {tableArr.map((item, i) => (
                <div key={item.pageId}>
                  <header
                    style={{
                      textAlign: 'left',
                      fontWeight: 'bold',
                      fontSize: 16,
                      marginBottom: 10,
                      marginTop: 30,
                    }}
                  >
                    {tableArr[i].pageName}
                  </header>
                  <Table
                    dataSource={item.maGpDetails}
                    columns={this.columns}
                    defaultExpandAllRows
                    pagination={false}
                    rowKey={record => record.pageDetailId}
                    style={{ backgroundColor: '#fff', textAlign: 'center' }}
                  />
                </div>
              ))}
            </Card>
          )}
        </Spin>
        <FooterToolbar>
          <Button onClick={this.submitcancel}>返回</Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}
export default DetailMaterial;
